<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../template/layout.xhtml">

    <ui:define name="title">
        Admin tasks list
    </ui:define>

    <ui:define name="content">
        <section class="task-list-page task-list-page-admin">
            <aside>
                <form>
                    <input type="text" value="" placeholder="Filter by name or description" id="filter" />
                </form>
                <ul class="header">
                    <li>
                        <div class="task-name"></div>
                        <div class="task-date light-gray">due date</div>
                    </li>
                </ul>
            </aside>
            <hr />
            <article id="filter-target" data-target="h3, p" data-element="li">
                <h2>Ongoing</h2>
                <ul class="task-list">
                    <ui:repeat var="t" value="#{taskBean.openTasks}">
                        <li>
                            <input type="hidden" value="#{t.id}" />
                            <div class="task-name">
                                <h3 class="no-overflow">#{t.title}</h3>
                                <p class="no-overflow">#{t.description}</p>
                            </div>
                            <!--                            <div class="task-new zero">
                                                            <a href="#{request.contextPath}/faces/admin/taskEdit.xhtml?id=#{t.id}">EDIT</a>
                                                        </div>-->
                            <div class="task-date no-overflow">
                                #{t.prettyDeadline} <span style="color: #9F9F9F">#{t.indexTimeLeft}</span>
                            </div>
                        </li>
                    </ui:repeat>
                </ul>
                <h2>Closed</h2>
                <ul class="task-list">
                    <ui:repeat var="t" value="#{taskBean.closeTasks}">
                        <li>
                            <input type="hidden" value="#{t.id}" />
                            <div class="task-name">
                                <h3 class="no-overflow">#{t.title}</h3>
                                <p class="no-overflow">#{t.description}</p>
                            </div>
                            <div class="task-date no-overflow">
                                #{t.prettyDeadline}
                            </div>
                        </li>
                    </ui:repeat>
                </ul>
            </article>
        </section>
    </ui:define>
</ui:composition>